<template>
  <div class="index-main-wrap">
    <div style="margin-top: 100px; width: 800px; margin-left: 20px">
      <div ref="slider" id="slider"></div>
    </div>

    <!-- <div class="header-wrap">
      <div class="header-title">图书馆空间预约系统</div>
      <div class="header-nav-wrap">
        <div class="nav-item">首页</div>
        <div class="nav-item">阅览室预约</div>
        <div class="nav-item">研究室预约</div>
        <div class="nav-item">登 录</div>
      </div>
    </div>
    <div>
      <el-carousel>
        <el-carousel-item>
          <img class="carousel-img" src="../assets/150707.jpg" />
        </el-carousel-item>
        <el-carousel-item>
          <img class="carousel-img" src="../assets/150724.jpg" />
        </el-carousel-item>
        <el-carousel-item>
          <img class="carousel-img" src="../assets/150737.jpg" />
        </el-carousel-item>
      </el-carousel>
    </div> -->
  </div>
</template>

<script>
import noUiSlider from 'nouislider'
import * as wNumb from 'wnumb'
export default {
  data() {
    return {}
  },
  mounted() {
    const ww = wNumb({ mark: '.', thousand: ',', prefix: '$ ', suffix: ' p.p.' })
    console.log(ww.to(301980.62))
    let slider = document.getElementById('slider')
    const valuesForSlider = [1, 2, 3, 4, 5, 6, 7, 8, 11, 12, 14, 16, 20, 24, 28, 32]
    const _this = this
    const format = {
      to: function (value) {
        return (
          _this.PrefixInteger(parseInt(Math.round(value) / 60), 2) +
          ':' +
          _this.PrefixInteger(Math.round(value) % 60, 2)
        )
      },
      from: function (value) {
        return _this.PrefixNumber(value)
      },
    }
    const val = this.getVal(480, 1320)
    noUiSlider.create(this.$refs.slider, {
      start: ['08:00', '10:00'],
      range: {
        min: 480,
        max: 1320,
      },
      step: 15,
      tooltips: true,
      format: format,
      pips: { mode: 'values', density: 2, values: val, format: format },
      // step: 150,
      connect: true,
      // direction: 'rtl',
      // orientation: 'vertical',
      // Move handle on tap, bars are draggable
      behaviour: 'tap-drag',
      // tooltips: true,
      // format: wNumb({
      //   decimals: 0,
      // }),

      // Show a scale with the slider
      // pips: {
      //   mode: 'steps',
      //   stepped: true,
      //   density: 4,
      // },
    })
    console.log(this.$refs.slider.innerHTML)
    console.log(this.PrefixNumber('09:00'))
    // console.log(this.PrefixInteger(parseInt(Math.round(480) / 60), 2))
    // console.log(this.getVal(300, 1320))
  },
  methods: {
    PrefixNumber(b) {
      var a = b.split(':')
      return parseInt(a[0]) * 60 + parseInt(a[1])
    },
    PrefixInteger(a, b) {
      return (Array(b).join('0') + a).slice(-b)
    },
    getVal(t, f) {
      var u = []
      var v = Math.ceil(t / 60)
      v = v * 60
      u.push(v)
      while (v + 60 <= f) {
        v += 60
        u.push(v)
      }
      return u
    },
  },
}
</script>

<style scoped>
.index-main-wrap {
  height: 100vh;
  width: 100vw;
}

.header-wrap {
  display: flex;
  background-color: #4bcfd6;
  height: 50px;
  align-items: center;
}

.header-wrap .header-title {
  color: #fff;
  margin-left: 100px;
  font-size: 24px;
  font-weight: 600;
}

.header-nav-wrap {
  display: flex;
  margin-left: 30px;
}

.header-nav-wrap .nav-item {
  margin-left: 15px;
  color: #fbfbfb;
  cursor: pointer;
  position: relative;
}

.header-nav-wrap .nav-item:hover {
  color: #fff;
}

.header-nav-wrap .nav-item:hover::after {
  height: 2px;
  background-color: #fff;
  position: absolute;
  content: ' ';
  width: 100%;
  top: 25px;
  left: 0;
}

.carousel-img {
  height: 300px;
  width: 100%;
  object-fit: cover;
}
</style>
